<!DOCTYPE html>
<html lang="en" class="app" xmlns:th="http://www.thymeleaf.org">
<head>  
  <meta charset="utf-8" />
  <title>Musik | Web Application</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

</head>
<body class="">

              <div class="row" id="ajaxContent" th:fragment="songListMusic">
                <div class="col-sm-8">
                  <div class="panel wrapper-lg">
                    <div class="row">
                      <div class="col-sm-5">
                        <img th:src="@{${songListBean.image}}" class="img-full m-b">
                      </div>
<!--                      歌单的具体信息-->
                      <div class="col-sm-7">
                        <h2 class="m-t-none text-black">[[${songListBean.title}]]</h2>
<!--                        头像,评论之类-->
<!--                        <div class="clearfix m-b-lg">-->
<!--                          <a href="#" class="thumb-sm pull-left m-r">-->
<!--                            <img src="images/a0.png" class="img-circle">-->
<!--                          </a>-->
<!--                          <div class="clear">-->
<!--                            <a href="#" class="text-info">Mike Mcalidek</a>-->
<!--                            <small class="block text-muted">2,415 followers / 225 following</small>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                        <div class="m-b-lg">-->
<!--                          <a href="#" class="btn btn-info">Play</a> <a href="#" class="btn btn-default">3 Comments</a>-->
<!--                        </div>-->
                        <div>
                          类型: <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/genres?type='+[[${songListBean.type}]])" class="badge bg-light" >[[${songListBean.type}]]</a>
                        </div>
                      </div>
                    </div>
                    <div class="m-t">
                      <p>[[${songListBean.text}]]</p>
                    </div>
                    <h4 class="m-t-lg m-b">Play List</h4>
                    <ul class="list-group list-group-lg">
                      <li class="list-group-item" th:each="songListMusicBean:${songListMusicBeanList}">
<!--                        添加入歌单-->
<!--                        <div class="pull-right m-l">-->
<!--                          <a href="#"><i class="icon-plus"></i></a>-->
<!--                        </div>-->
                        <a href="#" class=" m-r-sm pull-left audio">

                          <audio th:src="@{${songListMusicBean.musicBean.music_path}}" ></audio>
                          <i class="icon-control-play text"></i>

                        </a>
                        <div class="clear text-ellipsis">
                          <span>[[${songListMusicBean.musicBean.song_title}]]--[[${songListMusicBean.singerBean.name}]]</span>
                        </div>
                      </li>
                    </ul>
<!--                    评论的-->
<!--                    <h4 class="m-t-lg m-b">3 Comments</h4>-->
<!--                    <section class="comment-list block">-->
<!--                      <article id="comment-id-1" class="comment-item">-->
<!--                        <a class="pull-left thumb-sm">-->
<!--                          <img src="images/a0.png" class="img-circle">-->
<!--                        </a>-->
<!--                        <section class="comment-body m-b">-->
<!--                          <header>-->
<!--                            <a href="#"><strong>John smith</strong></a>-->
<!--                            <label class="label bg-info m-l-xs">Editor</label> -->
<!--                            <span class="text-muted text-xs block m-t-xs">-->
<!--                              24 minutes ago-->
<!--                            </span>-->
<!--                          </header>-->
<!--                          <div class="m-t-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum.</div>-->
<!--                        </section>-->
<!--                      </article>-->
<!--                      &lt;!&ndash; .comment-reply &ndash;&gt;-->
<!--                      <article id="comment-id-2" class="comment-item comment-reply">-->
<!--                        <a class="pull-left thumb-sm">-->
<!--                          <img src="images/a1.png" class="img-circle">-->
<!--                        </a>-->
<!--                        <section class="comment-body m-b">-->
<!--                          <header>-->
<!--                            <a href="#"><strong>John smith</strong></a>-->
<!--                            <label class="label bg-dark m-l-xs">Admin</label> -->
<!--                            <span class="text-muted text-xs block m-t-xs">-->
<!--                              26 minutes ago-->
<!--                            </span>-->
<!--                          </header>-->
<!--                          <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>-->
<!--                        </section>-->
<!--                      </article>-->
<!--                      &lt;!&ndash; / .comment-reply &ndash;&gt;-->
<!--                      <article id="comment-id-2" class="comment-item">-->
<!--                        <a class="pull-left thumb-sm">-->
<!--                          <img src="images/a2.png" class="img-circle">-->
<!--                        </a>-->
<!--                        <section class="comment-body m-b">-->
<!--                          <header>-->
<!--                            <a href="#"><strong>John smith</strong></a>-->
<!--                            <label class="label bg-dark m-l-xs">Admin</label> -->
<!--                            <span class="text-muted text-xs block m-t-xs">-->
<!--                              26 minutes ago-->
<!--                            </span>-->
<!--                          </header>-->
<!--                          <blockquote class="m-t">-->
<!--                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>-->
<!--                            <small>Someone famous in <cite title="Source Title">Source Title</cite></small>-->
<!--                          </blockquote>-->
<!--                          <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>-->
<!--                        </section>-->
<!--                      </article>-->
<!--                    </section>-->
<!--                    <h4 class="m-t-lg m-b">Leave a comment</h4>-->
<!--                    <form>-->
<!--                      <div class="form-group pull-in clearfix">-->
<!--                        <div class="col-sm-7">-->
<!--                          <label>Your name</label>-->
<!--                          <input type="text" class="form-control" placeholder="Name">-->
<!--                        </div>-->

<!--                      </div>-->
<!--                      <div class="form-group">-->
<!--                        <label>Comment</label>-->
<!--                        <textarea class="form-control" rows="5" placeholder="Type your comment"></textarea>-->
<!--                      </div>-->
<!--                      <div class="form-group">-->
<!--                        <button type="submit" class="btn btn-success">Submit comment</button>-->
<!--                      </div>-->
<!--                    </form>-->
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="panel panel-default"  >
                    <div class="panel-heading">Suggestions</div>
                    <div class="panel-body">
                      <article class="media" th:each="songListBeancebian:${songListBeancebianList}">
                        <a href="#" class="pull-left thumb-md m-t-xs">
                          <img th:src="@{${songListBeancebian.image}}">
                        </a>
                        <div class="media-body">                        
                          <a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/songListMusic?id='+[[${songListBeancebian.id}]])" class="font-semibold">[[${songListBeancebian.title}]]</a>
                          <div class="text-xs block m-t-xs"><a href="javascript:;" th:onclick="ajaxRequest('/user/ajax/songListMusic?id='+[[${songListBeancebian.id}]])">[[${songListBeancebian.provider}]]</a></div>
                        </div>
                      </article>
                  </div>
                </div>
              </div>

  </body>
</html>